<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">

    <style>
        .box {
            position: relative;
            background-color: #6c757d;
        }

        .box:after {
            position: absolute;
            display: block;
            content: "√";
            top: 0;
            right: 0;
            z-index: 102;
            color: #fff;
        }
    </style>

</head>
<body>
<jsp:include page="${APP_PATH}/common/head-blog.jsp"/>

<%--用户选择自己感兴趣的领域--%>
<div class="col-xl-9 col-lg-10 col-md-12 col-sm-12 mt-2" style="margin-left: auto;margin-right: auto;">
    <div class="my-3 pt-2 pb-4 pl-2 bg-white rounded" style="position: relative">
        <h4>在继续浏览博客板块前，请先选择你感兴趣的领域：</h4>
        <div style="position: absolute;top:18px;right:8px;">
            <form action="/area-pick" method="post" onsubmit="submitAreas()">
                <input type="hidden" name="areas">
                <button class="btn btn-outline-secondary" type="submit">提交</button>
            </form>
        </div>
    </div>
    <%--ajax动态插入最新发布的博客文章--%>
    <div id="card-columns" class="card-columns">
        <c:forEach items="${areas}" var="area">
            <div class="card" data-areaId="${area.id}" data-checked="false" onclick="checkedDiv(this)">
                <img class="card-img-bottom" alt="领域图片" src="${area.imgurl}">
                <div class="card-body">
                    <h5 class="card-title">${area.areaname}</h5>
                    <p class="card-text">${area.description}</p>
                </div>
            </div>
        </c:forEach>
    </div>
</div>

<div>
    <a href="#"><img alt="置顶图标" src="/images/top.svg" width="30px" height="30px"
                     style="position:fixed;z-index: 99999;right:20px;bottom: 20px;"></a>
</div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>

<script>
    <%--鼠标点击div，修改为选中状态--%>
    var areaIdArray = [];

    function checkedDiv(ele) {
        //1.判断是否勾选
        var checked = $(ele).attr("data-checked");
        var areaId = $(ele).attr("data-areaId");
        if (checked === "false") {
            $(ele).attr("data-checked", "true");
            //添加该areaId
            areaIdArray.push(areaId);
            $(ele).addClass("box");
        } else {
            $(ele).attr("data-checked", "false");
            //删除该areaId
            areaIdArray.remove(areaId);
            $(ele).removeClass("box");
        }
    }

    Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] === val) return i;
        }
        return -1;
    };

    Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };

    //点击提交
    function submitAreas() {
        //1.判断用户是否勾选
        if (!(areaIdArray.length > 0)) {
            toastr.error("请先选择你感兴趣的领域！！！");
            return false;
        }
        //2.表单数据填充
        $("input[name=areas]").val(areaIdArray.toString());
        return true;
    }
</script>

</body>

</html>
